<template>
  <Layout>
    <div class="wrapper">
      <div class="top_form_box">
        <div class="head_title">我的簽呈</div>
        <div class="form_box">
          <u-row justify="space-between" gutter="10">
            <u-col span="6">
              <u--input
                placeholder="请输入内容"
                border="surround"
                clearable
                v-model="params.keyword"
              ></u--input>
            </u-col>
            <u-col span="4">
              <UniSelect v-model="params.relationType" :options="selectOpts" />
            </u-col>
            <u-col span="2">
              <view class="search_box" @click="searchClick">
                <u-icon name="search" color="#fff" size="28"></u-icon>
              </view>
            </u-col>
          </u-row>
        </div>
      </div>
      <view class="table_box">
        <u-row justify="space-between" gutter="5" class="table_head">
          <u-col span="6">簽呈名稱</u-col>
          <u-col span="3" style="text-align: center">時效</u-col>
          <u-col span="3" style="text-align: center">狀態</u-col>
        </u-row>
        <u-list @scrolltolower="scrolltolower"   height="calc(100vh - 430rpx)" >
          <u-list-item v-for="(item, index) in tableData" :key="index">
            <u-row justify="space-between" gutter="5" style="background-color: #fff;padding-bottom: 10rpx; padding: 20rpx 10rpx;">
              <u-col span="6">
                <span style="color: #2979ff;text-decoration: underline;" @click="goDetail(item)">{{ item.petitionName }}</span>
              </u-col>
              <u-col span="3" style="text-align: center">
                <span :class="getTimeStatusFun(item.createTime, item.endTime).className">{{ getTimeStatusFun(item.createTime,item.endTime).text }}</span>
              </u-col>
              <u-col span="3" style="text-align: center">
                <span :class="classMap[item.petitionState]">{{ stateMap[item.petitionState] }}</span>
              </u-col>
            </u-row>
          </u-list-item>
        </u-list>
      </view>
    </div>
  </Layout>
</template>

<script>
import { getPetitionList } from "@/api/signManage/petition.js";
import UniSelect from "@/components/UniSelect/index.vue";
import { getTimeStatus } from '@/pages/petition/common/utilMethods.js'
export default {
  components: { UniSelect },
  data() {
    return {
      stateMap: {
        30: '已退回',
        1: '進行中',
        45: '已完成',
        15: '已關閉',
        // 16: '已失效'
      },
      classMap: {
        30: 'danger_text',
        1: 'primary_text',
        45: 'success_text',
        15: 'warning_text',
        16: 'danger_text'
      },
      selectOpts: [
        { label: "全部", value: "" },
        { label: "需要我簽的", value: 1 },
        { label: "我發起的", value: 2 },
      ],
      params: {
        isMyPetition: 1, 
        keyword: "",
        relationType: "",
        pageNum: 1,
        pageSize: 20,
      },
      loading: false,   // 是否正在加载
      finished: false,   // 是否全部加载完成
      indexList: [{ name: "xxx", age: 18, sex: 1 }],
      tableData: [],
      getTimeStatusFun: getTimeStatus
    };
  },
  onShow(){
    this.queryTableData()
  },
  methods: {
     // 点击搜索时要重置
    searchClick() {
      this.params.pageNum = 1
      this.tableData = []
      this.finished = false
      this.queryTableData()
    },
    scrolltolower() {
      if (this.loading || this.finished) return
      this.params.pageNum += 1
      this.queryTableData()
    },
     // 请求数据
    queryTableData() {
      if (this.loading || this.finished) return

      this.loading = true
      uni.showLoading({ mask: true })

      getPetitionList(this.params).then((res) => {
        const { list, total } = res.data

        if (this.params.pageNum === 1) {
          // 首次查询，直接覆盖
          this.tableData = list
        } else {
          // 追加数据
          this.tableData.push(...list)
        }

        // 判断是否已加载完全部
        if (this.tableData.length >= total) {
          this.finished = true
        }

        this.loading = false
        uni.hideLoading()
      }).catch(() => {
        this.loading = false
        uni.hideLoading()
      })
    },
   
    goDetail(row){
      uni.navigateTo({ url: `/pages/petition/petitionDetail/index?id=${row.templatePetitionUserId}` });
    }
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20rpx;
  .top_form_box{
     position: sticky;
     background-color: #fff;
     top: 130rpx;
     z-index: 9;
    .head_title {
      background-color: #fff;
      text-align: center;
      font-size: 30rpx;
      color: #333333;
      padding-bottom: 40rpx;
    }
    .form_box {
      .search_box {
        padding: 10rpx;
        background-color: #3cadfd;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10rpx;
      }
    }
  }
  .table_box {
    margin-top: 20rpx;
    .table_head {
      background-color: #f2f2f2;
      padding: 20rpx 10rpx;
    }
  }
}
.danger_text{
  font-size: 16px;
  color: #ef1b1b;
}
.primary_text{
  font-size: 16px;
  color: #16aee6;
}
.warning_text{
  font-size: 16px;
  color: #f5a61d;
}
</style>
